<template>
  <div style="height: 100%" class="chart" ref="chart"></div>
</template>

<script>
import { mixinReszie } from "@/mixin/resize.js";

import { getMeasurements } from "@/api/assignments";
import { generateId } from "@/utils";
import { formatDate } from "@/filter/index";
import { mapGetters } from "vuex";
import {
  getAssignmentsAllData,
  LINE_COLOES
} from "@/views/centralizedControl/js/utils";
import { GetDateDiff } from "@/utils/currentDate";
import { testData } from "./constant";
import { CHART_KEYS_PV } from "@/views/centralizedControl/deviceOperation/constant.js";
import { renderTestArr } from "./constant";
export default {
  mixins: [mixinReszie],
  props: {},
  watch: {},
  computed: {},
  data() {
    return {
      lineChart: null,
      fullscreen: false,
      brder1Key: generateId(),
      area123Curve: [],
      chartKeys: CHART_KEYS_PV,
      stage2: {
        stageId: "2",
        setTemperature: "800"
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.area123Curve = renderTestArr();
      const that = this;
      const series = [];
      if (this.area123Curve.length) {
        this.chartKeys.forEach(item => {
          series.push({
            name: item.label,
            type: "line",
            smooth: true,
            showSymbol: false,
            data: []
            // markPoint: {
            //   data: [
            //     {
            //       name: "某个坐标",
            //       coord: [400, 811],
            //       value: "标记1"
            //     }
            //   ],
            //   symbol: "arrow",
            //   itemStyle: {
            //     color: "rgb(246,197,53)"
            //   },
            //   label: {
            //     show: false
            //   },
            //   symbolSize: 12, // 容器大小
            //   symbolOffset: [0, -5], //位置偏移
            //   symbolRotate: 180
            // }
          });
        });

        // 取出阶段2的 后边要写成动态的
        const stageTow = this.area123Curve.filter(item => {
          return (
            parseInt(item.metadata.meter1RunStageNO) == this.stage2.stageId
          );
        });
        let startTime, endTime;
        if (stageTow.length) {
          // 第二阶段的开始时间
          startTime = stageTow[0].eventDate;
          // 第二阶段的结束时间
          endTime = stageTow.pop().eventDate;
        }
        this.area123Curve.forEach((item, index) => {
          this.chartKeys.forEach((chart, index) => {
            // chartKeys
            series[index].data.push(item.metadata[chart.key]);
          });
        });
        // 添加上下线
        series[0].markLine = {
          lineStyle: {
            normal: {
              type: "dashed",
              color: "#660d1e",
              width: 1
            }
          },
          data: [
            {
              symbol: "none",
              name: "",
              xAxis: formatDate(startTime, "", true) //x轴的位置,就是时间轴的
            },
            {
              symbol: "none",
              name: "",
              xAxis: formatDate(endTime, "", true) //x轴的位置,就是时间轴的
            },
            [
              // 上限
              {
                // 开始
                symbol: "none",
                name: "",
                yAxis: Number(this.stage2.setTemperature) + 10, //y轴的位置
                xAxis: formatDate(startTime, "", true) //x轴的位置,就是时间轴的
              },
              // 结束
              {
                symbol: "none",
                xAxis: formatDate(endTime, "", true),
                yAxis: Number(this.stage2.setTemperature) + 10
              }
            ],
            // 下限
            [
              {
                // 开始
                symbol: "none",
                name: "",
                yAxis: Number(this.stage2.setTemperature) - 10,
                xAxis: formatDate(startTime, "", true)
              },
              {
                // 结束
                symbol: "none",
                xAxis: formatDate(endTime, "", true),
                yAxis: Number(this.stage2.setTemperature) - 10
              }
            ]
          ]
        };
      }
      var option = {
        title: {
          text: "工艺曲线",
          x: "center",
          top: "10px",
          textStyle: {
            color: "#333",
            fontSize: 18,
            fontWeight: "400"
          }
        },
        // toolbox: {
        //   orient: "horizontal",
        //   feature: {
        //     restore: {
        //       title: "还原"
        //     }
        //   },
        //   itemSize: 18,
        //   iconStyle: {
        //     textAlign: "rght"
        //   }
        // },

        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: 100
          },
          // {  type: 'slider',  showDataShadow: false,
          //  handleIcon: 'path:M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          //   handleSize: '80%' ,
          //   start: 0,
          // //   end: data.length > 3 ? 35 : 100
          //  },
          {
            type: "inside",
            orient: "vertical"
            // start: 15,
            // end: 65,
          }
          // { //  type: 'inside', //  orient: 'vertical', // showDataShadow: false, //  // handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', //     // handleSize: '80%' // }
        ],
        color: LINE_COLOES,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#333"
            },
            lineStyle: {
              type: "dashed"
            }
          }
        },
        grid: {
          left: "25",
          right: "85",
          bottom: that.fullscreen ? "50" : "44",

          top: "65",
          containLabel: true
        },
        legend: {
          data: this.chartKeys.map(item => item.label),
          padding: [14, 0, 0, 0],
          orient: "horizontal",
          //   icon: "rect",
          show: true,
          textStyle: {
            color: "#333"
          },
          left: 20,
          top: 25
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.area123Curve.map(item =>
            formatDate(item.eventDate, "", true)
          ),
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#333",
            // interval: 239,
            textStyle: {
              fontSize: 11
            }
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          // max: max_value>=100? max_value + 100: max_value+10,
          // max: max_value > 100 ? max_value * 2 : max_value + 10,
          // interval: 10,
          // nameLocation: "center",
          axisLabel: {
            color: "#333",
            textStyle: {
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F3F4F4"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [...series]
      };

      this.$nextTick(() => {
        this.lineChart = this.$echarts.init(this.$refs.chart);
        this.lineChart.setOption(option);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.echarts_box {
  .chart {
    width: 100%;
    /* height: 260px; */
  }
}
</style>
